<template>
  <!-- 卡包-优惠券核销 -->
  <u-dialog :title="title" :show.sync="show" width="1040px" :auto-close="false" :footer="true" @cancel="cancel" @confirm="confirm">

    <el-form ref="dataForm" :rules="rules" :model="dataForm" label-width="100px">
      <el-form-item prop="couponno" label="劵号">
        <el-input :value="dataForm.couponno" placeholder="劵号" clearable disabled />
      </el-form-item>
      <el-form-item prop="couponname" label="名称">
        <el-input :value="dataForm.couponname" placeholder="名称" clearable disabled />
      </el-form-item>
      <el-form-item prop="balance" label="金额/次数">
        <el-input :value="dataForm.balance" placeholder="金额/次数" clearable disabled />
      </el-form-item>
      <el-form-item prop="number" label="核销">
        <el-input v-model="dataForm.number" placeholder="请输入核销金额或者次数" clearable />
      </el-form-item>
    </el-form>

  </u-dialog>

</template>

<script>
/**
 * 业务组件 - 卡包-优惠券核销
 */
export default {
  name: 'CouponConsume',
  model: {
    prop: 'show',
    event: 'changeShow'
  },
  props: {
    /** 是否弹框 */
    show: {
      type: Boolean,
      default: false
    },
    /** 选中的数据 */
    data: {
      type: Object,
      default: data => {
        return ({})
      }
    },
    /** 是否卡劵 */
    card: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      api: this.$u.api.MarketCouponCard,
      title: '优惠券核销',
      dataForm: {
        couponno: '',
        couponname: '',
        coupontype: '',
        balance: '',
        number: ''
      },
      rules: {
        number: [
          { required: true, message: '请输入核销金额或者次数', trigger: ['blur'] },
          { pattern: /^[1-9]\d*(,\d{3})*(\.\d{1,2})?$|^0\.\d{1,2}$/, message: '核销格式不正确' }
        ]
      }
    }
  },
  watch: {
    show(newVal) {
      // console.log(newVal + '---------------' + oldVal)
      // 监听是否弹框,决定是否初始化数据
      if (newVal) {
        this.data.number = ''
        this.dataForm = this.$u.deepClone(this.data)

        const { couponno } = this.dataForm
        this.title = '优惠券核销：查询【' + couponno + '】'

        // 初始化数据
        // 获取默认核销金额
        const { balance } = this.dataForm
        if (balance) {
          this.dataForm.number = balance.toString()
        }

        const self = this
        self.$nextTick(() => {
          self.$refs['dataForm'].clearValidate()
        })
      }
    }
  },
  created() {
    if (this.card) {
      this.api = this.$u.api.MarketCouponCardsingle
    }
  },
  methods: {
    // 确认
    confirm() {
      const self = this
      const data = self.$u.deepClone(self.dataForm)
      data.balance = data.number
      // 效验数据格式
      self.$refs['dataForm'].validate((valid) => {
        if (valid) {
          const unit = data.coupontype === 2 ? '次' : '元'
          // 模态对话框组件
          self.$confirm('此操作将【' + data.couponname + '】核销' + data.balance + unit + '，是否继续核销？', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => {
            // 处理确认事件
            self.api.consume(data).then(() => {
              // 通知信息
              self.$u.msg('操作优惠券核销成功')
              // 双向绑定数据
              self.$emit('changeShow', false)
              // 更新成功后传递
              self.$emit('change')
            })
          }).catch(() => {
          })
        }
      })

      this.$emit('confirm')
    },
    // 关闭或者取消
    cancel() {
      this.$emit('changeShow', false)
      this.$emit('cancel')
    }
  }
}
</script>
